<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

    <!-- jQuery/Angular/Bootstrap -->
    <script src="lib/jquery/jquery-2.1.1.min.js"></script>
    <!-- Since IONIC already bundle angularjs, don't need this at all -->
    <!--<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js" type="text/javascript"></script>-->

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- Wijmo -->
    <script src="lib/wijmo/wijmo.min.js" type="text/javascript"></script>
    <script src="lib/wijmo/wijmo.input.min.js" type="text/javascript"></script>
    <script src="lib/wijmo/wijmo.grid.min.js" type="text/javascript"></script>
    <script src="lib/wijmo/wijmo.chart.min.js" type="text/javascript"></script>
    <script src="lib/wijmo/wijmo.angular.min.js" type="text/javascript"></script>

    <link rel="stylesheet" type="text/css" href="lib/wijmo/wijmo.min.css">

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/domain.js"></script>
    <script src="js/app.js"></script>
</head>
<body ng-app="starter">

<ion-pane>
    <ion-header-bar class="bar-stable">
        <button class="button icon icon-left ion-plus-circled" ng-click="newGame()"> New</button>
        <h1 class="title">Guess Number</h1>
    </ion-header-bar>
    <ion-content>
        <div ng-controller="GuessNumberCtrl">
            <div class="item item-input-inset">
                <label class="item-input-wrapper">
                    <input name="value" type="number" placeholder="your guess number" ng-model="value" min="0" max="99">
                </label>
                <button class="button button-small" ng-click="check()">
                    Check
                </button>
            </div>

            <div class="list card">

                <div class="row item item-avatar">
                    <div class="col col-33">
                    <span ng-class="isValueCorrect ? 'ion-checkmark-circled' : 'ion-close-circled'"
                          class="ion-close-circled"
                          style="font-size: 5em; float: right;"></span>
                    </div>
                    <div class="col" style="border-left: dotted 1px gray; margin-left: 0.5em; padding-left: 1em;">
                        <h2>Answer:
                            <span ng-if="isAnswerVisible||isValueCorrect">{{answer}}</span>
                            <span ng-if="!isAnswerVisible&&!isValueCorrect">[SECURITY]</span></h2>
                        <br/>

                        <p>try count: {{count()}}<br/>message: {{lastMessage()}}</p>
                    </div>
                </div>

                <div class="item item-body">
                    <div class="item tabs tabs-secondary tabs-icon-left">
                        <a class="tab-item" href="#" ng-click="report='grid';reportSource.refresh()">
                            <i class="icon ion-grid"></i>
                            Grid
                        </a>
                        <a class="tab-item" href="#" ng-click="report='chart';reportSource.refresh()">
                            <i class="icon ion-speedometer"></i>
                            Chart
                        </a>
                    </div>

                    <div class="item" ng-if="report==='grid'">
                        <wj-flex-grid
                                items-source="reportSource"
                                is-read-only="true"
                                selection-mode="row"
                                style="height: 200px;">
                            <wj-flex-grid-column header="Value" binding="value" width="1*">
                            </wj-flex-grid-column>
                            <wj-flex-grid-column header="Message" binding="message" width="2*">
                            </wj-flex-grid-column>
                        </wj-flex-grid>
                    </div>
                    <div class="item" ng-if="report==='chart';">
                        <wj-flex-chart
                                items-source="reportSource"
                                chart-type="LineSymbols"
                                tooltip-content="<b>Value=</b>{y}"
                                style="height: 200px;">
                            <wj-flex-chart-series name="Value" binding="value">
                            </wj-flex-chart-series>
                        </wj-flex-chart>
                    </div>
                    <br/>
                </div>

            </div>
        </div>
    </ion-content>

    <ion-footer-bar class="bar-stable">
        <div class="item item-toggle">
            show answer
            <label class="toggle toggle-stable">
                <input type="checkbox" ng-model="isAnswerVisible">

                <div class="track">
                    <div class="handle"></div>
                </div>
            </label>
        </div>
    </ion-footer-bar>
</ion-pane>

</body>
</html>
